<template>
	<view class="orderDetail">
		<view class="receive">
			<view class="box">
				<view class="man">
					<view class="man-l">
						收货人:  <text>{{address.userName}}</text>
					</view>
					<view class="man-r">
						{{address.telNumber}}<text>></text>
					</view>
				</view>
				<view class="address">
					收货地址:<text>{{allAddress}}</text>
				</view>
			</view>
			<image src="../../static/cart_border@2x.png" mode=""></image>
		</view>
		<view class="goods">
			<view class="title">
				<text class="iconfont icon-shop"></text>优购生活馆
			</view>
			<view class="item" v-for="(item,index) in goodsList" :key="index">
				<view class="msg">
					<image @click="toGoodDetail(item.goods_id)" :src="item.goods_small_logo" mode=""></image>
					<view class="intro">
						<view class="top" @click="toGoodDetail(item.goods_id)">
							{{item.goods_name}}
						</view>
						<view class="bottom">
							<view class="price">
								￥<text>{{item.goods_price}}</text>.00
							</view>
							<view class="num">
								*{{item.num}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<button @click="wxpay" class="mybtn" type="primary">微信支付￥{{totalmoney}}.00元</button>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				address:{},
				goodsList:[],
				order_num:0,
				id:undefined
			}
		},
		onLoad(options) {
			this.id = options.goods_id
			// console.log(this.id)
		},
		async onShow() {
			this.address = uni.getStorageSync('address') || {}
			// 判断商品id是否存在  存在：直接请求id对应的商品信息
			var ids
			if(!this.id){
				var cartList = uni.getStorageSync('cart')
				this.goodsList = cartList.filter(item=>{
					return item.isCheck
				})
				ids = this.goodsList.map(item=>item.goods_id).join(',')
			}else{
				ids = this.id
			}
			const res = await this.$http({
				url:'/goods/goodslist?goods_ids=' + ids,
				method:'get'
			})
			console.log(res)
			if(!this.id){
				this.goodsList.forEach(item=>{
					res.forEach(itemres=>{
						if(item.goods_id == itemres.goods_id){
							this.$set(item,'goods_name',itemres.goods_name)
							this.$set(item,'goods_price',itemres.goods_price)
							this.$set(item,'goods_small_logo',itemres.goods_small_logo)
						}
					})
				})
			}else{
				res[0].num = 1
				res[0].isCheck = true
				this.goodsList = res
			}
			
		},
		computed:{
			allAddress(){
				return this.address.provinceName + this.address.cityName + this.address.countyName + this.address.detailInfo
			},
			totalmoney:{
				get(){
					var money = 0
					this.goodsList.forEach(item=>{
						if(item.isCheck){
							money += item.num * item.goods_price
						}
					})
					return money
				}
			}
		},
		methods:{
			async wxpay(){
				var token = uni.getStorageSync('token')
				if(!token){
					uni.showToast({
						title:'请先登录',
						icon:'none'
					})
					uni.navigateTo({
						url:'/pages/login'
					})
					return
				}
				var myGood = this.goodsList.map(item=>{
					return {
						goods_id:item.goods_id,
						goods_number:item.num,
						goods_price:item.goods_price
					}
				})
				const res1 = await this.$http({
					url:'/my/orders/create',
					method:'post',
					header:{
						Authorization:token
					},
					data:{
						order_price:this.totalmoney,
						consignee_addr:this.allAddress,
						goods:myGood
					}
				})
				this.order_num = res1.order_number
				const res2 = await this.$http({
					url:'/my/orders/req_unifiedorder',
					method:'post',
					header:{
						Authorization:token
					},
					data:{
						order_number:this.order_num
					}
				})
				uni.requestPayment({
					...res2.pay,
					success: res => {
						// console.log('成功')
						if(!this.id){
							this.delPayData()
						}
						uni.showToast({
							title:'支付成功'
						})
						uni.navigateTo({
							url:'/pages/order/order'
						})
					},
					fail: res => {
						uni.showToast({
							title:'取消支付',
							icon:'none'
						})
					}
				})
			},
			delPayData(){
				var cartList = uni.getStorageSync('cart')
				var newArr = cartList.filter(item=>{
					return !item.isCheck
				})
				uni.setStorageSync('cart',newArr)
			}
		}
	}
</script>

<style lang="less">
	.orderDetail{
		.receive{
			background-color: #fff;
			margin-bottom: 20rpx;
			.man{
				padding: 0 18rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-top: 45rpx;
				.man-l{
					text{
						margin-left: 60rpx;
					}
				}
				.man-r{
					text{
						color: #999999;
						margin-left: 55rpx;
					}
				}
			}
			.address{
				padding: 0 18rpx;
				margin: 55rpx 0 50rpx;
				text{
					margin-left: 25rpx;
				}
			}
			image{
				display: block;
				width: 100%;
				height: 14rpx;
			}
		}
		.goods{
			background-color: #fff;
			.title{
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;
				padding-left: 32rpx;
				border-bottom: 1rpx solid #dddddd;
				font-size: 18px;
				text{
					color: #999999;
					font-size: 20px;
					margin-right: 12rpx;
				}
			}
			.item{
				width: 100%;
				height: 206rpx;
				display: flex;
				align-items: center;
				.check{
					width: 88rpx;
					text-align: center;
				}
				.msg{
					flex: 1;
					display: flex;
					align-items: center;
					padding: 25rpx 0 20rpx;
					border-bottom: 1rpx solid #dddddd;
					image{
						width: 160rpx;
						height: 160rpx;
						margin-right: 20rpx;
					}
					.intro{
						flex: 1;
						height: 160rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						padding-right: 18rpx;
						.top{
							text-overflow: -o-ellipsis-lastline;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							line-clamp: 2;
							-webkit-box-orient: vertical;
						}
						.bottom{
							display: flex;
							justify-content: space-between;
							.price{
								color: #eb4450;
								text{
									font-size: 20px;
								}
							}
							.num{
								
							}
						}
					}
				}
			}
		}
		.mybtn{
			border-radius: 0;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
		}
	}
</style>
